<template>
  <template v-for="item in menus" :key="item._id">
    <!-- 包含子节点(chilren),则为el-sub-menu -->
    <el-sub-menu
      v-if="item.children && item.children.length > 0"
      :index="item.path"
    >
      <template #title>
        <!-- <el-icon><setting /></el-icon> -->
        <component class="iconsize" :is="item.iconName"></component>
        <span>{{ item.title }}</span>
      </template>
      <menu-tree :menus="item.children" />
    </el-sub-menu>
    <!-- 仅为单个菜单项(不含children) -->
    <el-menu-item
      v-else-if="item.menuType == 1"
      :index="item.path"
      :key="item._id"
    >
      <component class="iconsize" :is="item.iconName"></component>
      <template #title>{{ item.title }}</template>
    </el-menu-item>
  </template>
</template>
<script>
export default {
  name: "MenuTree",
  props: {
    menus: {
      type: Array,
      default: () => [
        {
          _id: 1,
          menuType: 0,
          title: "系统管理",
          iconName: "location",
          path: "/system",
          children: [
            {
              _id: 2,
              menuType: 1,
              title: "用户管理",
              iconName: "setting",
              path: "/system/users",
            },
            {
              _id: 3,
              menuType: 1,
              title: "菜单管理",
              iconName: "setting",
              path: "/system/menus",
            },
            {
              _id: 4,
              menuType: 1,
              title: "角色管理",
              iconName: "setting",
              path: "/system/roles",
            },
          ],
        },
       
      ],
    },
  },
};
</script>
<style>
.iconsize {
  height: 20px;
  width: 20px;
  /* font-size: 30px; */
  margin-right: 10px;
}
</style>
